<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-input-spinner.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div id="app">
    <div id="container">
        <div class="page-header">
            <h1>&nbsp;&nbsp;特殊随机数生成 <small>目前支持[6 + 1 / 5 + 2]的随机数</small></h1>
        </div>
        <div class="row">
            <div class="col-md-1">
                &nbsp;
            </div>
            <div class="col-md-10">

                <div class="alert alert-warning alert-dismissible" role="alert" style="display: none;" id="numWarnDiv">
                    <strong>友情提示： 请正确填写“个人幸运数字”.</strong>
                </div>

                <div class="panel panel-success">
                    <div class="panel-heading">填写幸运数字 + 点击按钮 &gt;&gt; 6+1随机数</div>
                    <div class="panel-body">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon1">个人幸运数字(目前支持1 ~ 99之间的数字)</span>
                            <input type="number" class="form-control" id="lucyNumber" value="1" min="1" max="99" step="1"/>
                            <span class="input-group-btn">
                                <button class="btn btn-success" type="button" id="blessStart">开始生成[6红 + 1蓝]随机数</button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="panel panel-danger" style="float: left; width: 73%">
                    <div class="panel-heading">红色数字</div>
                    <div class="panel-body">
                        <p id="redText" style="font-size: 30px; color: red;"></p>
                    </div>
                </div>
                <div class="panel panel-primary" style="float: left; width: 25%; margin-left:10px;">
                    <div class="panel-heading">蓝色数字</div>
                    <div class="panel-body">
                        <p id="blueText" style="font-size: 30px; color: blue;"></p>
                    </div>
                </div>
            </div>

            <div class="col-md-1">
                &nbsp;
            </div>
        </div>

        <div class="row">
            <div class="col-md-1">
                &nbsp;
            </div>
            <div class="col-md-10">

                <div class="alert alert-warning alert-dismissible" role="alert" style="display: none;" id="lottoNumWarnDiv">
                    <strong>友情提示： 请正确填写“个人幸运数字”.</strong>
                </div>

                <div class="panel panel-success">
                    <div class="panel-heading">填写幸运数字 + 点击按钮 &gt;&gt; 5+2随机数</div>
                    <div class="panel-body">
                        <div class="input-group input-group-lg">
                            <span class="input-group-addon" id="sizing-addon3">个人幸运数字(目前支持1 ~ 99之间的数字)</span>
                            <input type="number" class="form-control" id="lottoLucyNumber" value="1" min="1" max="99" step="1"/>
                            <span class="input-group-btn">
                                    <button class="btn btn-success" type="button" id="blessGo">开始生成[5红 + 2蓝]随机数</button>
                                </span>
                        </div>
                    </div>
                </div>
                <div class="panel panel-danger" style="float: left; width: 73%">
                    <div class="panel-heading">红色数字</div>
                    <div class="panel-body">
                        <p id="lottoRedText" style="font-size: 30px; color: red;"></p>
                    </div>
                </div>
                <div class="panel panel-primary" style="float: left; width: 25%; margin-left:10px;">
                    <div class="panel-heading">蓝色数字</div>
                    <div class="panel-body">
                        <p id="lottoBlueText" style="font-size: 30px; color: blue;"></p>
                    </div>
                </div>
            </div>


            <div class="col-md-1">
                &nbsp;
            </div>
        </div>

    </div>
</div>
</body>

<script>
$(document).ready(function(){

$("#blessStart").click(function() {
    // 先关闭警告
    $("#numWarnDiv").hide();
    // 获取幸运数字
    var lucyNumber = $("#lucyNumber").val();
    // 检测是否在0 ~ 99之间
    if(lucyNumber > 0 & lucyNumber < 100) {
        $.ajax({
            url:"/church/doubleBall?lucyNumber="+lucyNumber,
            async:true,
            success: function(data) {
                if(data!=null) {
                    $("#redText").html(data['redTxt']);
                    $("#blueText").html(data['blueTxt']);
                }
            }
        });
    } else {
        $("#numWarnDiv").show();
    }
});

$("#blessGo").click(function() {
    // 先关闭警告
    $("#lottoNumWarnDiv").hide();
    // 获取幸运数字
    var lucyNumber = $("#lottoLucyNumber").val();
    // 检测是否在0 ~ 99之间
    if(lucyNumber > 0 & lucyNumber < 100) {
        $.ajax({
            url:"/church/lotto?lucyNumber="+lucyNumber,
            async:true,
            success: function(data) {
                if(data!=null) {
                    $("#lottoRedText").html(data['redTxt']);
                    $("#lottoBlueText").html(data['blueTxt']);
                }
            }
        });
    } else {
        $("#numWarnDiv").show();
    }
});

});
</script>

</html>